<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery 菜单（Menu）1.0.0 </title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>

	</head>
	<style>
		.open {
			color: #7FFFD4;
		}
		
		.selected {
			color: red;
		}
	</style>

	<body>

		<div class="menu">

			<ul>
				<li>
					<a>1-></a>
					<ul>
						<li><a>1.1</a></li>
						<li><a>1.2</a></li>
						<li><a>1.3</a></li>
						<li>
							<a>1.4-></a>
							<ul>
								<li><a>1.41</a></li>
								<li><a>1.42</a></li>
								<li><a>1.43</a></li>
								<li><a>1.44</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a>2</a></li>
				<li><a>3</a></li>
				<li>
					<a>4-></a>
					<ul>
						<li><a>4.1</a></li>
						<li><a>4.2</a></li>
						<li><a>4.3</a></li>
						<li><a>4.4</a></li>
					</ul>
				</li>

				<li><a>5</a></li>
			</ul>
		</div>

		<script>
			$('.menu li').children('ul').hide();
			$('li>a').click(function() {
				if($(this).parent('li').children().length > 1) {
					 
					if($(this).hasClass('open')) {
						$(this).removeClass('open');
						$(this).parent('li').children('ul').hide();
					} else {
						$(this).addClass('open');
						$(this).parent('li').children('ul').show();
					}
				} else {
					$('.selected').removeClass('selected')
					$(this).addClass('selected')
				}
			})
		</script>
	</body>

</html>